// 提供各种混合样式

.self-center(@pos: absolute) {
  position: @pos;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.self-fill(@pos: absolute) {
  position: @pos;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

// 主背景
.main-bg{
  height: 100%;
    background-image: linear-gradient(
        45deg,
        #84c1fc 13%,
        #fcfdfd 50%,
        #fcfdfd 70%,
        #cae8fd 95%
    );
}

// 实心按钮
.default-btn{
  height: 35px;
  line-height: 35px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  background-image: linear-gradient(to right, #198dff, #4dc3ff);
  transition-duration: 0.4s;
  cursor: pointer;
  &:hover {
      height: 35px;
      line-height: 35px;
      transform: translateY(-2px);
      box-shadow: 0 0 5px #198dff;
  }
}

// 镂空按钮
.hollow-btn{
  box-sizing: border-box;
  // border: 1px solid #198cff;
  height: 30px;
  line-height: 30px;
  color: #198cff;
  text-align: center;
  font-size: 14px;
  transition-duration: 0.4s;
  border: 1px solid;
  border-image: -webkit-linear-gradient(#198cff, #4cc3ff) 10 100;
  border-image: -moz-linear-gradient(#198cff, #4cc3ff) 10 10;
  border-image: linear-gradient(#198cff, #4cc3ff) 10 10;
  cursor: pointer;
  &:hover {
      height: 30px;
      line-height: 30px;
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 0 5px #198dff;
      background-image: linear-gradient(to right, #198dff, #4dc3ff);
      border: 0;
  }
}

// 镂空按钮-白色
.hollow-btn-fff{
  box-sizing: border-box;
  // border: 1px solid #198cff;
  height: 30px;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  transition-duration: 0.4s;
  border: 1px solid #ffffff;
  cursor: pointer;
  &:hover {
      height: 30px;
      line-height: 30px;
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 0 5px #198dff;
      background-image: linear-gradient(to right, #198dff, #4dc3ff);
      border: 0;
  }
}
